<template>
  <div class="page-content pt-24">
    <p class="title p-0-16 mb-24">{{ $t('More_Link') }}</p>
    <div class="cross-line mb-24"></div>
    <div class="list p-0-16">
      <mx-link
        v-for="item in links"
        :key="item.text"
        :href="item.link"
        :to="item.link"
        :with-locale="item.withLocale"
        target="_blank"
        class="item mr-16 cursor-pointer"
      >
        <img :src="item.image" class="logo mb-4 img-cover" alt="" />
        <p class="name">{{ $t(item.text) }}</p>
      </mx-link>
    </div>
  </div>
</template>

<script>
import { LANGUAGE } from '@/constants/index';

export default {
  name: 'FriendlyLinkPage',

  computed: {
    language() {
      return this.$store.state.app.language;
    },
    links() {
      if (this.language === LANGUAGE.ZH) {
        return [
          {
            text: '柬埔寨中文社区',
            link: 'http://www.7jpz.com/',
            image: require('@/assets/images/logo_tnaot_zh.png'),
            withLocale: false
          },
          {
            text: 'Harbor_Property', // 港湾置业
            link: 'https://www.harbor-property.com/zh-cn',
            image: require('@/assets/images/logo_harbor_zh.png'),
            withLocale: false
          },
          {
            text: 'Litalk',
            link: 'https://litalk.im/',
            image: require('@/assets/images/logo_litalk.png'),
            withLocale: false
          },
          {
            text: 'Knongsrok',
            link: 'https://www.knongsrok.com',
            image: require('@/assets/images/logo_knongsrok.png'),
            withLocale: false
          },
          {
            text: '菲华网',
            link: 'https://phhua.com/',
            image: require('@/assets/images/logo_phhua.png'),
            withLocale: false
          }
        ];
      }

      return [
        {
          text: 'TNAOT on FaceBook',
          link: 'https://www.facebook.com/Tnaot.kh/',
          image: require('@/assets/images/logo_facebook_tnaot.png'),
          withLocale: false
        },
        {
          text: 'Harbor_Property', // 港湾置业
          link: 'https://www.harbor-property.com/en',
          image: require('@/assets/images/logo_harbor_km.png'),
          withLocale: false
        },
        {
          text: 'Litalk',
          link: 'https://litalk.im/',
          image: require('@/assets/images/logo_litalk.png'),
          withLocale: false
        },
        {
          text: 'Knongsrok',
          link: 'https://www.knongsrok.com',
          image: require('@/assets/images/logo_knongsrok.png'),
          withLocale: false
        },
        {
          text: 'Phhua',
          link: 'https://phhua.com/',
          image: require('@/assets/images/logo_phhua.png'),
          withLocale: false
        }
      ];
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~assets/styles/variable.scss';

.page-content {
  width: $page-width;
  margin: 0 auto;

  .title {
    font-size: 28px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 48px;
    font-weight: 500;
  }

  .cross-line {
    width: 100%;
    height: 2px;
    background: rgba(12, 12, 28, 0.08);
  }

  .list {
    display: flex;
    align-items: center;
    height: 72px;
  }

  .name {
    width: 176px;
    height: 24px;
    font-size: 16px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
  }

  .logo {
    width: 176px;
    height: 44px;
  }
}
</style>
